<template>
  <el-descriptions
    ref="ruleFormRef"
    :column="2"
    direction="vertical"
    v-loading="isLoading"
  >
    <el-descriptions-item width="50%" :label="titles.id">
      {{ isNullOrEmpty( formInline?.id ) }}
    </el-descriptions-item>
    <el-descriptions-item width="50%" :label="titles.deviceName">
      {{ isNullOrEmpty( formInline?.deviceName ) }}
    </el-descriptions-item>
    <el-descriptions-item width="50%" :label="titles.productId">
      {{ isNullOrEmpty( formInline?.productId ) }}
    </el-descriptions-item>
    <el-descriptions-item width="50%" :label="titles.prodcutName">
      {{ isNullOrEmpty( formInline?.prodcutName ) }}
    </el-descriptions-item>
    <el-descriptions-item width="50%" :label="titles.deviceSN">
      {{ isNullOrEmpty( formInline?.deviceSN ) }}
    </el-descriptions-item>
    <el-descriptions-item width="50%" :label="titles.connectStatus">
      {{ isNullOrEmpty( formInline?.connectStatus ) }}
    </el-descriptions-item>
    <el-descriptions-item width="50%" :label="titles.systemId">
      {{ isNullOrEmpty( formInline?.systemId ) }}
    </el-descriptions-item>
    <el-descriptions-item width="50%" :label="titles.systemName">
      {{ isNullOrEmpty( formInline?.systemName ) }}
    </el-descriptions-item>
    <el-descriptions-item width="50%" :label="titles.status">
      {{ isNullOrEmpty( formInline?.status ) }}
    </el-descriptions-item>
  </el-descriptions>
</template>

<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import { ref } from "vue";
import { titles } from "./index";
import type { infoType } from "@/api/operate/device-management/index";
type FormProps = {
  formInline: infoType;
  isLoading: boolean;
};

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({}) as infoType,
  isLoading: false
});

const ruleFormRef = ref();
//  const newFormInline = ref(props.formInline as any);
//
//
//  watch(()=>props.formInline,()=>{
//  	newFormInline.value = props.formInline
//  },{
//  	deep:true,
//  	immediate:true
//  })

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>
